
<extend name="Public:common"/>
<block name="main">
    <if condition="$refresh eq true">
        <script language="JavaScript">
            location=location;
        </script>
    </if>

    <form class="am-form am-form-horizontal" enctype="multipart/form-data" method="post" data-am-validator="H5validation:false">
        <fieldset>
            <legend>编辑</legend>
                <div class="am-input-group">
                    <span class="am-input-group-label"><b>金额</b></span>
                    <input type="number" class="am-form-field" id="text-money" name="edit_money" step=0.01 value="{$ShowData.money}">
                    <p></p>
                </div>
                <div><p></p></div>
                <div class="am-input-group">
                    <span class="am-input-group-label"><b>账户</b></span>
                    <select id="select-funds" class="am-form-field" name="edit_funds">
                    <foreach name="FundsData" item="data">
                        <if condition="$data['id'] eq $DbFunds">
                            <option value="{$data.id}" selected>{$data.name}</option>
                        <else/>
                            <option value="{$data.id}">{$data.name}</option>
                        </if>
                    </foreach>
                    </select>
                    <span class="am-form-caret"></span>
                </div>
                <div><p></p></div>
                <div class="am-input-group">
                    <span class="am-input-group-label"><b>类别</b></span>
                    <select id="select-type" class="am-form-field" name="edit_type" onchange="ChangClass({$MoneyClass},'select-type','select-class')">
                        <if condition="$ShowData['type'] eq '收入'">
                            <option value="1">收入</option>
                            <option value="2">支出</option>
                        <else/>
                            <option value="2">支出</option>
                            <option value="1">收入</option>
                        </if>
                    </select>
                </div>
                <div><p></p></div>
                <div class="am-input-group">
                    <span class="am-input-group-label"><b>分类</b></span>
                    <select id="select-class" class="am-form-field" name="edit_class">
                    <option value="{$ShowData.classid}">{$ShowData.class}</option>
                    <foreach name="DbClass" item="ClassName">
                        <if condition="$key neq $ShowData['classid']">
                            <option value="{$key}">{$ClassName}</option>
                        </if>
                    </foreach>
                    </select>
                    <span class="am-form-caret"></span>
                </div>
                <div><p></p></div>
                <div class="am-input-group">
                    <span class="am-input-group-label"><b>备注</b></span>
                    <input type="text" class="am-form-field" id="text-mark" name="edit_mark" value="{$ShowData.mark}">
                    <span class="am-input-group-btn am-form-file">
                        <button type="button" class="am-btn am-btn-default" id="btn-upload-image" data-am-loading="{spinner: 'circle-o-notch', loadingText: '上传中...', resetText: '上传完成'}">
                            <i class="am-icon-cloud-upload"></i> 上传图片
                        </button>
                        <input id="doc-form-file" type="file" name="edit_photo[]" accept=".jpg, .gif, .png, .jpeg" multiple />
                    </span>
                </div>
                <div><p></p></div>
                <div class="am-input-group">
                    <span class="am-input-group-label"><b>时间</b></span>
                    <input type="date" class="am-form-field" id="text-time" name="edit_time" 
                            value="<php>echo date("Y-m-d",$ShowData['time']);</php>" />
                </div>

                <if condition="$ImageData neq false ">
                <p><hr data-am-widget="divider" style="" class="am-divider am-divider-dashed" /></p>
                <ul data-am-widget="gallery" class="am-gallery am-avg-sm-3
  am-avg-md-4 am-avg-lg-5 am-gallery-bordered" data-am-gallery="{ pureview: true }" id="doc-image-list" >
                    <foreach name="ImageData" item="image">
                      <li id="doc-image-{$image.id}">
                        <a href="javascript:void(0);" data-id="{$image.id}" data-acid="{$acid}" class="am-close am-close-alt am-close-spin am-icon-times" style="position: absolute; margin: 5px;"></a>
                        <div class="am-gallery-item">
                          <img src="{$image.url}" alt="{$image.name}" style="height: 20vw;" />
                            <h3 class="am-gallery-title">
                                {$image.name}
                            </h3>
                            <div class="am-gallery-desc">
                                {$image.time|date="Y-m-d",###}
                            </div>
                        </div>
                      </li>
                    </foreach>
                </ul>
                </if>

                <p><hr data-am-widget="divider" style="" class="am-divider am-divider-dashed" /></p>
                <p><input type="submit" class="am-btn am-btn-secondary am-btn-block" name="edit_submit" value="修改"></p>
                
                <p><a href="javascript:void(0);" class="am-btn am-btn-block am-btn-danger" 
                    onclick="isDelete('__APP__/Home/Edit/del/id/{$ShowData['id']}')" >删除</a></p>
                
                <p><a href="{$refURL}" class="am-btn am-btn-block am-btn-default">返回</a></p>
                
        </fieldset>
    </form>
    <div class="am-modal am-modal-confirm" tabindex="-1" id="delete-confirm">
      <div class="am-modal-dialog">
        <div class="am-modal-hd">删除图片</div>
        <div class="am-modal-bd">
          您确定要删除这张图片附件吗？
        </div>
        <div class="am-modal-footer">
          <span class="am-modal-btn" data-am-modal-confirm>删除</span>
          <span class="am-modal-btn" data-am-modal-cancel>取消</span>
        </div>
      </div>
    </div>
    <div style="display: none;">
        <button type="button" class="am-btn am-btn-warning" id="doc-confirm-toggle">Close</button>
    </div>
</block>

<block name="javascript">
    <script>
      function GetImageLength() {
          return $('ul.am-gallery').children('li').length;
      }

      function DeleteImage(acid, id, callback) {
          $.post("__APP__/Home/Edit/deleteImage",{acid:acid,id:id},function(ret){
            callback(ret);
          });
      }

      function ResetFormFile() {
          $('#doc-form-file').val('');
      }

      function ResetHtml() {
          var url = location.href;
          var mark = location.hash;
          if (mark != '') {
            url = url.replace(mark, '')
          }
          location.href = url + "#doc-form-file"; 
          location.reload(true);
          // location=location;
      }

      function UploadImage(files, callback) {
        $('#btn-upload-image').button('loading');
        var formData = new FormData()
        formData.append("acid", {$acid});
        $.each(files, function() {
            formData.append("file[]", this);
        });
        $.ajax({
            url: '__APP__/Home/Add/upload',
            type: 'POST',
            cache: false,
            data: formData,
            processData: false,
            contentType: false,
            success: function (json) {
                //上传成功的处理
                console.log(json);
                $('#btn-upload-image').button('reset');
                if (callback) {
                    callback(json);
                }
            }
        });
      }

      $(function() {
        $('#doc-form-file').on('change', function() {
          var fileNames = '';
          var fileSize = 0;
          if (this.files.length + GetImageLength() > 9) {
            alert("每个账单图片数量不能超过9个，请筛选后重新上传。");
            ResetFormFile();
            return;
          }
          $.each(this.files, function() {
            fileNames += '<span class="am-badge">' + this.name + '</span> ';
            fileSize += this.size;
          });
          if (fileSize > 3*1024*1024) {
            alert("单次上传文件体积不能超过3MB，请压缩后重新上传。");
            ResetFormFile();
            return;
          }
          UploadImage(this.files, function(ret) {
            ResetHtml();
          });
        });

        $('#doc-image-list').find('.am-close').add('#doc-confirm-toggle').
          on('click', function() {
          $('#delete-confirm').modal({
            relatedTarget: this,
            onConfirm: function(options) {
              var $dataset = $(this.relatedTarget).prev('a').context.dataset;
              DeleteImage($dataset.acid, $dataset.id, function(ret){
                ResetHtml();
              });
            },
            onCancel: function() {
              console.log($(this.relatedTarget));
            }
          });
        });

      });

    </script>
</block>
